<template>
  <div>
    <!-- 搜索辅导员信息的搜索栏 -->
    <el-input v-model="searchNoOrName" placeholder="请输入辅导员编号或姓名"></el-input>
    <el-button size="small" type="primary" @click="searchById(searchNoOrName)">搜索</el-button>
    <!-- 新增辅导员按钮 -->
    <el-button size="small" type="success" @click="showAddDialog">新增</el-button>
    <!-- 辅导员表格 -->
    <el-table :data="instructorData" style="width: 100%">
      <el-table-column prop="instructorNo" label="辅导员编号" width="180"></el-table-column>
      <el-table-column prop="instructorName" label="姓名" width="180"></el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template v-slot="scope">
          <!-- 删除按钮 -->
          <el-button size="small" type="danger" @click="deleteInstructor(scope.row.id)">删除</el-button>
          <!-- 修改信息按钮 -->
          <el-button size="small" type="primary" @click="change(scope.row)">修改信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        prev-text="上一页"
        next-text="下一页"
        page-text="第{{ currentPage }}页"
        page-size-text="每页{{ pageSize }}条">
    </el-pagination>
  </div>
  <el-dialog title="辅导员操作" v-model="this.dialogVisible" width="30%">
    <el-form :model="this.editForm"  ref="editForm">
      <el-form-item label="辅导员编号" prop="instructorNo">
        <el-input v-model="this.editForm.instructorNo"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="instructorName">
        <el-input v-model="this.editForm.instructorName" autocomplete="off"></el-input>
      </el-form-item >
      <el-form-item label="id" prop="id">
        <el-input v-model="this.editForm.id" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false ;this.editForm={}">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确 定</el-button>
      </div>
    </el-dialog>
  <!-- 新增辅导员的对话框 -->
  <el-dialog title="新增辅导员" v-model="addDialogVisible">
    <el-form :model="addForm">
      <el-form-item label="辅导员编号" prop="instructorNo">
        <el-input v-model="addForm.instructorNo" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="instructorName">
        <el-input v-model="addForm.instructorName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmAdd">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import request from "@/util/request.js";

export default {
  data() {
    return {
      instructorData: [], // 辅导员数据
      searchNoOrName: '', // 用于存储搜索的ID
      page: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        total: 0 // 总条数
      },
      dialogVisible: false,// 控制修改辅导员对话框的显示
      editForm: {},
      addDialogVisible: false, // 控制新增辅导员对话框的显示
      addForm: {}
    };
  },
  methods: {
    handleSizeChange(newSize) {
      this.page.pageSize = newSize;
      this.getInstructors();
    },
    handleCurrentChange(newPage) {
      this.page.currentPage = newPage;
      this.getInstructors();
    },
    getInstructors() {
      let url = `/info_instructor/page?pageNum=${this.page.currentPage}&pageSize=${this.page.pageSize}`;
      request.get(url)
          .then((res) => {
            if (res.data.code === "200") {
              this.instructorData = res.data.data.records;
              this.page.total = res.data.data.total;
            }
          })
          .catch((err) => {
            console.error(err);
          });
    },
    searchById(searchNoOrName) {
      // 构造搜索的 URL
      let url = `/info_instructor/${searchNoOrName}`;
      if (!searchNoOrName) {
        this.getInstructors();
      } else {
        // 向后端服务器发送搜索请求
        request.get(url)
            .then((res) => {
              if (res.data.code === "200") {
                // 处理返回的数据
                if (res.data.data) {
                  this.instructorData = res.data.data; // 更新前端表格的数据
                } else {
                  // 如果搜索结果为空，清空表格数据并给出提示
                  this.instructorData = [];
                  this.$message({
                    type: 'info',
                    message: '没有找到匹配的辅导员'
                  });
                }
              }
            })
            .catch((err) => {
              // 处理错误情况
              console.error(err);
            });
      }
    },
    deleteInstructor(id) {
      this.$confirm('此操作将永久删除该辅导员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认删除，向服务器发送请求
        request.get(`/info_instructor/delete/${id}`)
            .then(() => {
              // 删除成功，重新获取数据
              this.getInstructors();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
            .catch((err) => {
              // 处理错误情况
              console.error(err);
            });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    change(row) {
      this.editForm = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    confirmChange() {
      if (this.editForm.id) {
        // 如果存在ID，则执行修改操作
        request.post(`/info_instructor/edit`, this.editForm)
            .then(() => {
              this.dialogVisible = false; // 关闭对话框
              this.getInstructors(); // 重新获取数据
              this.$message({
                type: 'success',
                message: '更新成功!'
              });
            })
            .catch((err) => {
              console.error(err);
            });
      } else {
        // 如果不存在ID，则执行新增操作
        request.post('/info_instructor/edit', this.editForm)
            .then(() => {
              this.dialogVisible = false; // 关闭对话框
              this.getInstructors(); // 重新获取数据
              this.$message({
                type: 'success',
                message: '新增成功!'
              });
            })
            .catch((err) => {
              console.error(err);
            });
      }
    },
    showAddDialog() {
      this.addDialogVisible = true; // 显示新增辅导员对话框
      this.addForm = {}; // 重置表单
    },
    confirmAdd() {
      request.post('/info_instructor/edit', this.addForm) // 发送POST请求到服务器
          .then(() => {
            this.addDialogVisible = false; // 关闭对话框
            this.getInstructors(); // 重新获取数据
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
          })
          .catch((err) => {
            console.error(err);
          });
    },
  },
  created() {
    this.getInstructors();
  }
};
</script>
<style>
</style>
